import type { Ref } from 'react'
import { useLayoutEffect } from 'react'
import { useState } from 'react'
import React, { useEffect, forwardRef, useImperativeHandle, useRef } from 'react'
import * as echarts from 'echarts'
import styles from './index.module.less'
import type { IDataItem } from '@/pages/rainbow/interface'

const fontSizeBase = 15

/** 坐标字体样式 */
const axisTextStyle = {
    font: `bold ${fontSizeBase}px "Microsoft YaHei", sans-serif`, // 文本字体样式
    fill: '#333', // 文本颜色
}

/** 标题字体样式 */
const titleTextStyle = {
    font: `bold ${fontSizeBase}px "Microsoft YaHei", sans-serif`, // 文本字体样式
    fill: '#000', // 文本颜色
}

/** 空白样式 */
const placeHolderStyle = {
    normal: {
        color: 'rgba(0,0,0,0)',
        label: {
            show: false,
        },
        labelLine: {
            show: false,
        },
    },
    emphasis: {
        color: 'rgba(0,0,0,0)',
    },
}

/** 彩虹图角度 */
const radius = [0, 27, 34, 41, 48, 55, 62, 69]

const maxAge = 100

export default forwardRef((props: { data: IDataItem[]; noAnimation?: boolean; width: number; bgColor?: string }, ref: Ref<{ exportImg: () => Promise<string> }>) => {
    const { data, noAnimation, width, bgColor } = props
    const echartRef = useRef<any>({ myChart: null, isFinish: false })
    const [url, setUrl] = useState()

    useImperativeHandle(ref, () => {
        return {
            /** 图片导出 */
            exportImg: () => {
                return new Promise((resolve, reject) => {
                    if (echartRef.current?.isFinish) {
                        const baseUrl = echartRef.current?.myChart?.getDataURL({
                            pixelRatio: 2,
                            backgroundColor: '#fff',
                        })
                        resolve(baseUrl)
                    } else {
                        echartRef.current?.myChart?.on('finished', function () {
                            const baseUrl = echartRef.current?.myChart?.getDataURL({
                                pixelRatio: 2,
                                backgroundColor: '#fff',
                            })
                            resolve(baseUrl)
                        })
                    }
                })
            },
        }
    })

    /** 生成彩虹数据 和 角色名称 */
    function generateSeriesAndText(dataSource: any) {
        const { name, age_start, age_end, settings, sort }: any = dataSource
        const series: any = [
            /** 默认1分 */
            {
                name,
                type: 'pie',
                clockWise: true,
                hoverAnimation: false,
                radius: [`${radius[sort]}%`, `${radius[sort] + 1.4}%`],
                // itemStyle: dataStyle,
                startAngle: 180,
                data: [
                    {
                        value: (Number(age_start) / maxAge) * 180,
                        name: '',
                        itemStyle: placeHolderStyle,
                    },
                    {
                        value: (Number(age_end - age_start) / maxAge) * 180,
                        name,
                        label: { show: false },
                    },
                    {
                        value: (Number(maxAge - age_end) / maxAge) * 180,
                        name: '',
                        itemStyle: placeHolderStyle,
                    },
                    {
                        value: 180,
                        name: '',
                        itemStyle: placeHolderStyle,
                    },
                ],
            },
            /** 外边框 */
            {
                name,
                type: 'pie',
                clockWise: true,
                hoverAnimation: false,
                radius: [`${radius[sort]}%`, `${radius[sort] + 7}%`],
                startAngle: 180,
                data: [
                    {
                        value: (Number(age_start) / maxAge) * 180,
                        name: '',
                        itemStyle: placeHolderStyle,
                    },
                    {
                        value: (Number(age_end - age_start) / maxAge) * 180,
                        name,
                        label: {
                            show: false,
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,0,0,0)',
                                borderWidth: 1, // 设置描边宽度为 5
                                borderColor: '#000', // 设置描边颜色为白色
                            },
                        },
                    },
                    {
                        value: (Number(maxAge - age_end) / maxAge) * 180,
                        name: '',
                        itemStyle: placeHolderStyle,
                    },
                    {
                        value: 180,
                        name: '',
                        itemStyle: placeHolderStyle,
                    },
                ],
            },
        ]
        const graphic: any = [
            {
                type: 'text', // 绘制文本元素
                left: 'center', // 文本元素左侧的位置
                bottom: `${51 + radius[sort] / 2}%`, // 文本元素顶部的位置
                style: {
                    text: name, // 文本内容
                    font: `bold ${fontSizeBase}px "Microsoft YaHei", sans-serif`, // 文本字体样式
                    fill: 'rgba(255,255,255,1)',
                    stroke: '#000',
                    lineWidth: 2,
                },
                textConfig: {
                    origin: 'center',
                },
                z: 10,
            },
        ]
        /** 获取所有开始和结束的数组
         *  处理年龄选择不能重复导致图形无法覆盖
         */
        const startArr: any = []
        const endArr: any = []
        settings.forEach((item: any) => {
            startArr.push(item.age_start)
            endArr.push(item.age_end)
        })

        settings.forEach((item: any) => {
            let { age_start: start, age_end: end, grade } = item
            start = endArr.includes(`${start - 1}`) ? Number(start) - 0.5 : Number(start)
            end = startArr.includes(`${Number(end) + 1}`) ? Number(end) + 0.5 : Number(end)

            series.push({
                z: 1,
                name,
                type: 'pie',
                clockWise: true,
                hoverAnimation: false,
                radius: [`${radius[sort]}%`, `${radius[sort] + grade * 1.4}%`],
                startAngle: 180,
                data: [
                    {
                        value: (start / maxAge) * 180,
                        name: '',
                        itemStyle: placeHolderStyle,
                    },
                    {
                        value: ((end - start) / maxAge) * 180,
                        name,
                        label: { show: false },
                    },
                    {
                        value: (Number(maxAge - end) / maxAge) * 180,
                        name: '',
                        itemStyle: placeHolderStyle,
                    },
                    {
                        value: 180,
                        name: '',
                        itemStyle: placeHolderStyle,
                    },
                ],
            })
        })
        console.log(series)
        return { series, graphic }
    }

    useEffect(() => {
        const chartDom = document.getElementById('rainbow')
        const myChart = chartDom && echarts.init(chartDom)
        let option

        /** 生成数据 */
        const seriesAndGraphic = data.reduce(
            (pre: any, cur: any) => {
                const { series, graphic } = generateSeriesAndText(cur)
                return { series: [...pre.series, ...series], graphic: [...pre.graphic, ...graphic] }
            },
            { graphic: [], series: [] },
        )

        /** 图标配置项 */
        option = {
            grid: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                width: 1080,
                height: 1080,
                show: false,
            },
            backgroundColor: bgColor || '#fff',
            color: ['#a93985', '#e34734', '#c6de5f', '#60b956', '#4d4b94', '#834d9f'],
            tooltip: {
                show: false,
                formatter: '{b} <br/> {c} ({d}%)',
            },
            animation: !noAnimation,
            series: [
                ...seriesAndGraphic.series,
                /** 仪表盘 */
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: maxAge,
                    splitNumber: maxAge / 5,
                    radius: '76%',
                    itemStyle: {
                        color: '#000',
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2,
                    },
                    axisLine: {
                        roundCap: true,
                        lineStyle: {
                            width: 2,
                            color: [[1, '#000']],
                        },
                    },
                    axisTick: {
                        splitNumber: 5,
                        distance: 2,
                        lineStyle: {
                            width: 1,
                            color: '#999',
                        },
                    },
                    splitLine: {
                        length: 8,
                        distance: 2,
                        lineStyle: {
                            width: 2,
                            color: '#999',
                        },
                    },
                    axisLabel: {
                        distance: -fontSizeBase * 2,
                        color: '#000',
                        fontSize: fontSizeBase,
                    },

                    data: [],
                },
                /** 外围阶段 */
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: maxAge,
                    splitNumber: maxAge,
                    radius: '81%',
                    itemStyle: {
                        color: '#000',
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2,
                    },
                    axisLine: {
                        roundCap: true,
                        lineStyle: {
                            width: fontSizeBase / 5,
                            color: [[1, '#000']],
                        },
                    },
                    axisTick: {
                        splitNumber: 5,
                        distance: fontSizeBase / 7,
                        lineStyle: {
                            width: 0,
                            color: '#000',
                        },
                    },
                    splitLine: {
                        length: 0,
                    },
                    axisLabel: {
                        color: '#333',
                        fontSize: fontSizeBase,
                        distance: -fontSizeBase * 1.5,
                        fontWeight: 'bold',
                        rotate: 'tangential',
                        formatter: function (value: any) {
                            if (value === 7) {
                                return '成长阶段'
                            } else if (value === 12) {
                                return '探索阶段'
                            } else if (value === 25) {
                                return '建立阶段'
                            } else if (value === 55) {
                                return '维持阶段'
                            } else if (value === 75) {
                                return '退出阶段'
                            }
                            return ''
                        },
                    },
                    data: [],
                },
            ],
            graphic: {
                elements: [
                    {
                        type: 'text', // 绘制文本元素
                        left: 'center', // 文本元素左侧的位置
                        top: '2%', // 文本元素顶部的位置
                        style: {
                            text: '环境决定因素', // 文本内容
                            ...titleTextStyle,
                        },
                        textConfig: {
                            origin: 'center',
                        },
                    },
                    {
                        type: 'text', // 绘制文本元素
                        left: 'center', // 文本元素左侧的位置
                        top: '4%', // 文本元素顶部的位置
                        style: {
                            text: '历史的', // 文本内容
                            ...titleTextStyle,
                        },
                        textConfig: {
                            origin: 'center',
                        },
                    },
                    {
                        type: 'text', // 绘制文本元素
                        left: 'center', // 文本元素左侧的位置
                        top: '6%', // 文本元素顶部的位置
                        style: {
                            text: '社会经济的', // 文本内容
                            ...titleTextStyle,
                        },
                        textConfig: {
                            origin: 'center',
                        },
                    },
                    {
                        type: 'text', // 绘制文本元素
                        left: 'center', // 文本元素左侧的位置
                        bottom: '57%', // 文本元素顶部的位置
                        style: {
                            text: '个人决定因素', // 文本内容
                            ...titleTextStyle,
                        },
                        textConfig: {
                            origin: 'center',
                        },
                    },
                    {
                        type: 'text', // 绘制文本元素
                        left: 'center', // 文本元素左侧的位置
                        bottom: '55%', // 文本元素顶部的位置
                        style: {
                            text: '心理的', // 文本内容
                            ...titleTextStyle,
                        },
                        textConfig: {
                            origin: 'center',
                        },
                    },
                    {
                        type: 'text', // 绘制文本元素
                        left: 'center', // 文本元素左侧的位置
                        bottom: '53%', // 文本元素顶部的位置
                        style: {
                            text: '生物的', // 文本内容
                            ...titleTextStyle,
                        },
                        textConfig: {
                            origin: 'center',
                        },
                    },
                    {
                        type: 'text', // 绘制文本元素
                        left: '3%', // 文本元素左侧的位置
                        bottom: '47%', // 文本元素顶部的位置
                        style: {
                            text: '生命阶段与年龄', // 文本内容
                            ...axisTextStyle,
                        },
                        textConfig: {
                            origin: 'center',
                        },
                    },
                    {
                        type: 'text', // 绘制文本元素
                        right: '3%', // 文本元素左侧的位置
                        bottom: '47%', // 文本元素顶部的位置
                        style: {
                            text: '生命阶段与年龄', // 文本内容
                            ...axisTextStyle,
                        },
                        textConfig: {
                            origin: 'center',
                        },
                    },
                    {
                        type: 'line',
                        shape: {
                            x1: (myChart?.getWidth?.() || 1) * 0.12,
                            y1: (myChart?.getHeight?.() || 1) * 0.5,
                            x2: (myChart?.getWidth?.() || 1) * 0.88,
                            y2: (myChart?.getHeight?.() || 1) * 0.5,
                        },
                        style: {
                            lineWidth: fontSizeBase / 7,
                            stroke: '#000',
                        },
                    },
                    ...seriesAndGraphic.graphic,
                ],
            },
        }

        myChart && option && myChart?.setOption(option)
        echartRef.current.myChart = myChart
        myChart?.on('finished', function () {
            echartRef.current.isFinish = true
        })
        if (noAnimation) {
            const baseUrl = echartRef.current?.myChart?.getDataURL({
                pixelRatio: 2,
                backgroundColor: bgColor,
            })
            setUrl(baseUrl)
        }

        return () => {
            myChart?.dispose()
        }
    }, [data])

    return (
        <>
            {noAnimation && url ? (
                <img
                    src={url}
                    style={{
                        // transform: `scale(${width / 1080})`,
                        overflow: 'hidden',
                        width: '1080px',
                        transformOrigin: 'center 0',
                    }}
                />
            ) : null}
            <div
                className={styles.rainbow_wrapper}
                style={{
                    transform: `scale(${width / 1080})`,
                    overflow: 'hidden',
                    width: '1080px',
                    transformOrigin: '0 0',
                    display: noAnimation && url ? 'none' : 'block',
                }}
            >
                <div id="rainbow" className={styles.rainbow} />
            </div>
        </>
    )
})
